var TodoList = React.createClass({
	getInitialState: function () {
          return {
              todolist: ["0","1","2","3","last"]
          };
     },
    handleChange: function (rows) {
         this.setState({
             todolist: rows
         });
    },
    handleAdd: function (e) {
         e.preventDefault();
         var inputDom = this.refs.inputnew;
         var newthing = inputDom.value.trim();
         // 获取传入的todolist数据
         var rows = this.state.todolist;
         if (newthing !== '') {
             rows.push(newthing);
             this.handleChange(rows);
         }
         inputDom.value = '';
    },
	handleDel: function (e) {
         var delIndex = e.target.getAttribute('data-key');
         // 更新数据，并使用 onDel 更新到 TodoList 的 state 中，以便 React自动render
         this.state.todolist.splice(delIndex, 1);
         this.handleChange(this.state.todolist);
	},
	render: function () {
        return (
         	<div>
			 	<input type="button" onClick={this.handleAdd} value="add"/>
	         	<input type="text" ref="inputnew" id="todo-new" placeholder="typing a newthing todo" autoComplete="off" />
                <ul id="todo-list">
		     	{
					this.state.todolist.map(function (item, i) {
	                         return (
	                             <li key={i}>
	                                 <label>{item}</label>
	                                 <button onClick={this.handleDel} data-key={i}>delete</button>
	                             </li>
	                         )
	                     }.bind(this))
		     	}
				</ul>
            </div>
        );
    }
});
	
ReactDOM.render(
	<article>
		<h1 style={{color: 'orange'}}>Hello World!</h1>
		<TodoList/>
	</article>,
	document.getElementById("example") 
);